<template>
	<view class="detail">
		<view class="imgs">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			                        <swiper-item v-for="(item,index) in imgs" :key="index" >
			                            <image class="img" :src="item"></image>
			                        </swiper-item>
			                    </swiper>
		</view>
		<view class="info">
			 <view class="con">
				 <text class="name">{{goods.name}}</text>
				 <text class="desc">{{goods.info}}</text>
			 </view>
			<view class="prices">
				<text class="now">￥{{goods.nowPrice}}</text>
				<text class="old">￥{{goods.oldPrice}}</text>
			</view>
		<!-- 	<view class="other">
				<text class="sales">销量: 3000</text>
				<text class="stock">库存: 4000</text>
				<text class="watch">销量: 100</text>
			</view> -->
		</view>
	
		
<mall-detail-label @click.native="share"   title="该可商品分享"  more="立即分享" :arrow="true" ></mall-detail-label>
<mall-detail-label :border="true" v-if="goods.skuList&&goods.skuList.length>0" title="购买类型"  :arrow="true" @click.native="this.showSku=true" desc="选择分类" ></mall-detail-label>
<mall-detail-label v-if="goods.point&&goods.point>0"  title="可用积分" :desc="goods.point" ></mall-detail-label>
<view class="big-img">
	<text class="title">宝贝详情</text>
	<image mode="widthFix" v-for="(img,index) in bigImgs" :key="index" class="img" :src="img"></image>
</view>
<mall-buy-bar :badge="badge" @buy="clickBuy" @cart="clickCart" class="buy-bar"></mall-buy-bar>
<mall-sku :show.sync="showSku" @selectSku="selectSku" :key="goods.id" v-if="canShow" class="mall-sku"  :goods="goods" ></mall-sku>
	</view>
</template>

<script>
	import mallDetailLabel from '../../components/mall-detail-label/mall-detail-label.vue'
	import mallBuyBar from '../../components/mall-buy-bar/mall-buy-bar.vue'
	import mallSku from '../../components/mall-sku/mall-sku.vue'
	import {goodsInfo} from '@/api/home.js'
	import CONFIG from '@/config/index.js'
	import {setCart,getCart} from '@/storage/index.js'
	import {addCart} from '@/common/js/cart.js'
	import {mapState} from 'vuex'
	import {showCorrect} from '@/toast/index.js'
	export default {
		components:{
			mallDetailLabel	,mallBuyBar, mallSku
		},
		onLoad(options) {
			console.log(options)
		},
		onShareTimeline(){
			return {
			  title: `${this.goods.name}`,
			  query: `pid=${this.userId}&goodsId=${this.goodsId}`
			}
		},
		onShareAppMessage: function (res) {
			return {
			  title: `${this.goods.name}`,
			  path: `/pages/mall/detail?pid=${this.userId}&goodsId=${this.goodsId}`
			}
		  },
		computed:{
			...mapState({
				userId:state=>state.user.user.id,
				options:state=>state.wx.options
			}),
			canShow(){
				return this.showSku&&this.goods.skuList&&this.goods.skuList.length>0
			},
			badge(){
				let number = 0 ;
				Object.values(this.cart).forEach(item => {
					number += item.number
				})
				return number
			}
		},
		onShow() {
			console.log(this.options)
			this.goodsId = this.$Route.query.id
			if(!this.goodsId){
				this.goodsId = this.options.query.goodsId
			}
			this.getInfo(this.goodsId)
			this.cart = getCart()
		},
		data() {
			return {
				 goodsId:null,
				 cart : {},
				 goods:{},
				 showSku:false,
				 indicatorDots: true,
				 autoplay: true,
				 interval: 2000,
				 duration: 500,
				 imgs:[],
				 imgs:[],
				 bigImgs:[],
				 sku:null,
				 number:1,
				 toStatus:0 //0 加入购物车  1跳转到购买
			}
		},
		methods: {
			share(){
				showCorrect("点击右上角三个点分享")
			},
			clickBuy(){
				this.showSku = true
				this.toStatus = 1
				if(!this.canShow){ //没有弹出sku
					this.cart = addCart(this.cart,this.goods,this.sku,1)
					setCart(this.cart)
					//跳转到购物车页面
					this.$Router.pushTab("/pages/mall/cart")
				}
			},
			clickCart(){
				this.showSku = true
				this.toStatus = 0
				if(!this.canShow){ //没有弹出sku
					this.cart = addCart(this.cart,this.goods,this.sku,1)
					setCart(this.cart)
				}
			},
			selectSku(sku,number){
				this.sku = sku
				this.cart = addCart(this.cart,this.goods,this.sku,number)
				setCart(this.cart)
				if(this.toStatus == 1){ //跳转到购物车
					this.$Router.pushTab("/pages/mall/cart")
				}
			},
			getInfo(id){
				goodsInfo(id).then(res => {
					this.goods = res.data
					if(this.goods.midImg){
						this.imgs = this.goods.midImg.split(",").map(img => {
							return CONFIG.IMG_HEAD + img
						})
					}
					if(this.goods.bigImg){
						this.bigImgs = this.goods.bigImg.split(",").map(img => {
							return CONFIG.IMG_HEAD + img
						})
					}
				})
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.detail
		padding-bottom 87upx
		background url(../../static/dbg.png) no-repeat
		background-size 100% 325rpx
		background-color #EFEFEF
		.imgs
			padding 0 20rpx
			overflow hidden
			.swiper
				overflow hidden
				border-radius 10rpx
				width 100%
				height 690rpx
				.img
					width 100%
					height 100%
		.info
			background-color #FFFFFF
			margin-top 20rpx
			padding 28rpx 17rpx
			.con
				display flex
				flex-direction column
				margin-bottom 18rpx
				.name
					overflow hidden
					white-space nowrap
					text-overflow ellipsis
					color #4E3D07
					font-size 28rpx
					margin-bottom 5rpx
				.desc
					overflow hidden
					text-overflow ellipsis
					color #6F6F6F
					font-size 22rpx
			.prices
				margin-bottom 20rpx
				.now
					color #F1652E
					font-size 32rpx
				.old
					margin-left 8rpx
					color #A1A1A1
					font-size 24rpx
					text-decoration line-through
			.other
				line-height 20rpx
				display flex
				align-items center
				justify-content space-between
				color #A1A1A1
				font-size 20rpx
		.big-img
			margin-top 20rpx
			background-color #FFFFFF
			padding 0 20rpx
			.title
				display flex
				justify-content center
				overflow hidden
				color #6F6F6F
				font-size 32rpx
				margin 30rpx auto
			.img
				flex 1
				width 100%
		.buy-bar
			position fixed
			bottom 0
			right 0
			left 0
			
</style>
